<template>
  <div>
    <x-header id="header" :left-options="{showBack: false}">产品</x-header>
    <div class="main-headerAndTab">
      <tab active-color custom-bar-width="60px" v-model="current">
        <tab-item selected>热门产品</tab-item>
        <tab-item>更多产品</tab-item>
      </tab>
      <div class="good-list" >
        <div class="good-cell" v-for=" item in (current === 0 ? goodList:moreGoodList)" @click="goDetail(item.id)">
          <div class="cell-left">
            <img class="cell-icon" :src="item.picture"/>
          </div>
          <div class="cell-right" :class="{ 'noBorder': item.title === '社保贷'}">
            <div class="cell-title">{{item.title}}</div>
            <div class="cell-explain">{{item.scope}}</div>
          </div>
        </div>
      </div>
    </div>
    <b-tabbar :value="1" />
  </div>
</template>

<script>
import bTabbar from '../../components/Btabbar'
import { getHotProductsList,getGoodsList } from '@/api/good'
import { cookie } from 'vux'

export default {
  name: 'good',
  components: {
    bTabbar,
  },
  data () {
    return {
      current: 0,
      goodList: [
        {
          id: 0,
          picture: require('../../../static/img/good-1.png'),
          title: '房供贷',
          scope: '适于于有房产的客户'
        },
        {
          id: 1,
          picture: require('../../../static/img/good-2.png'),
          title: '保单贷',
          scope: '适于于持有≥2年有效期保单的客户'
        },
        {
          id: 2,
          picture: require('../../../static/img/good-3.png'),
          title: '公积金贷',
          scope: '适于于缴纳公积金≥1年的客户'
        },
        {
          id: 3,
          picture: require('../../../static/img/good-4.png'),
          title: '社保贷',
          scope: '适于于缴纳社保≥1年的客户'
        }
      ],
      moreGoodList: [],
      cp: 0,
      lp: 1,
      mcp: 0,
      mlp: 1
    }
  },
  methods: {
    goDetail (id) {
      this.$router.push({
        name: 'goodDetail',
        query: {
          id: id
        }
      })
    },
    getList () {
      if (this.cp < this.lp) {
        getHotProductsList(this.cp + 1).then( data => {
          this.cp = data.current_page
          this.lp = data.last_page
          this.goodList = data.data
        })
      }
    },
    getMoreList () {
      if (this.mcp < this.mlp) {
        getGoodsList(this.mcp + 1).then( data => {
          this.mcp = data.current_page
          this.mlp = data.last_page
          this.moreGoodList = data.data
        })
      }
    }
  },
  mounted () {
    this.getList()
    this.getMoreList()
  }
}
</script>

<style scoped>
.good-list {
  background: #ffffff;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.good-cell {
  display: flex;
}
.cell-left {
  padding: 1rem;
}
.cell-right {
  padding: 1rem 1rem 1rem 0;
  flex: 1;
  border-bottom: 1px solid #f0f0f0;
}
.cell-icon {
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
}
.cell-title {
  color: #5B5B5B;
  line-height: 1.5rem;
}
.cell-explain {
  font-size: 0.85rem;
  color: #A6A6A6;
  line-height: 1.5rem;
}
.noBorder {
  border:none
}
</style>
